// Color variable
$purple: #7D74FF
$blue: #53ECFF
$cyan-blue: #3DF7FF
$green: #48CF73
$powder: #FF4565
$white: #fff
$black: #000

$nav-height: 50px
$shadow-height: 3px
$label-width: 150px
$image-width: 50px
$label-lr-margin: 10px

nav
  width: 100%
  position: fixed
  top: 0
  left: 0
  z-index: 999
  background: $white
  height: $nav-height + $shadow-height
  border-bottom: 1px #ccc solid

  div
    height: $nav-height + $shadow-height
    width: $label-width
    display: inline-block
    float: left
    margin: 0 0 0 30px

    img
      height: $nav-height
      width: $image-width

    span
      margin: 0 0 0 5px
      top: 5px
      position: absolute
      font-size: 26px
      font-weight: bold
      cursor: default

  ul
    height: $nav-height + $shadow-height
    padding: 0
    margin: 0
    float: right

    li
      position: relative
      padding: 10px
      margin: $shadow-height 5px 0
      height: $nav-height
      width: $label-width
      background: #ddd
      border-top-left-radius: $nav-height / 4
      border-top-right-radius: $nav-height / 4
      display: inline-block
      transition: all 0.3s linear

      &:after
        content: ""
        width: 0
        height: $shadow-height
        background: $purple
        position: absolute
        bottom: 0
        left: 0
        transition: all 0.5s ease 0s

      &:hover
        box-shadow: 5px 0 2px #888
        background: #aaa

        a
          color: $white

      &:hover:after
        width: 100%

      a
        position: relative
        height: 100%
        width: 100%
        font-size: 20px
        color: $black

    .on
      background: #aaa
      box-shadow: 5px 0 2px #888

      a
        color: $white

    .login
      margin: 0 50px
      background: #ddd
      border-top-left-radius: $nav-height / 4
      border-top-right-radius: $nav-height / 4

      &:hover
        background: $purple

        a
          color: $white